// 可以对各个浏览器的样式做一个统一
import Vue from 'vue'
import 'normalize.css/normalize.css'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 引入 ElementUI 的英文语言包
// import locale from 'element-ui/lib/locale/lang/en'

// 引入全局的样式，less 定义变量用 @，sass 用 $
import '@/styles/index.scss'

// 引入根组件
import App from './App'

// 引入 Vuex 实例
import store from './store'

// 引入路由实例
import router from './router'

// 导入所有 icons，只需要执行一下这个文件的代码即可
import '@/icons'
// 引入权限相关的代码
import '@/permission'
import MyComponents from '@/components'
// 把 @/directives 里面所有的按需导出的对象都糅合到 directives 这个变量里面
import * as directives from '@/directives'
import * as filters from '@/filters'

import Print from 'vue-print-nb'
// !#2
import i18n from '@/lang'
// import checkPermission from '@/mixins/checkPermission'

// 所有组件都混入了 checkPermission 里面的数据和方法
// Vue.mixin(checkPermission)
// 一旦注册了这个插件，就会自动多一个全局的 v-print
Vue.use(Print)

// !往 Vue 原型上挂载的方法，所有组件中都可以通过 this 访问到，例如 this.checkPermission
Vue.prototype.checkPermission = function(key) {
  // 有可能取出来的 this.roles 是 undefined，从 undefined.points 直接报错
  // 最好使用 ?. 表示可选链，只有左边有（不为 null 或 undefined），才往右边取值
  const points = store.getters.roles?.points
  if (points && points.length) {
    // 看一下传递过来表示在不在功能数组里面
    return points.includes(key)
  }
  return false
}

for (const key in directives) {
  Vue.directive(key, directives[key])
}

for (const filterName in filters) {
  Vue.filter(filterName, filters[filterName])
}

Vue.use(MyComponents)
Vue.use(ElementUI, {
  // !#3
  // 根据 locale 的不同显示对应的语言包，注入到 Element UI
  i18n: (key, value) => i18n.t(key, value)
})

Vue.config.productionTip = false

// 注册路由实例、注册 Vuex 实例，把根组件渲染到 public/index.html 里面的 #app
new Vue({
  el: '#app',
  router,
  store,
  // !#4 把 i18n 插件挂载到 Vue，这句话一写，所有的组件都可以通过 this.$t 拿到 i18n 实例
  i18n,
  render: h => h(App)
})

